/* 设置所有的内容 */
#product_content{
    width: 1200px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

/* 产品图片 */
#product_logo{
    margin: 10px 0;
}
#product_logo > img{
    width: 100%;
    height: 50px;
}
/* 真正的产品布局：上方详细信息 */
#product_item{
    width: 100%;
    display: flex;
    border-right: 1px solid black;
    margin-bottom: 20px;
}
/* 产品大图 */
#product_pic{
    width: 300px;
    height: 400px;
    margin: 0 30px;
}
/* 右边的大布局 */
#item{
    display: flex;
    flex-direction: column;
}
/* 标题 */
#item_title{
    width: 100%;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
}
/* 介绍  */
#item_introduction{
	width: 100%;
    margin-bottom: 5px;
}
/* 价格 */
#item_price{
    display: flex;
    flex-direction: column;
    width: 50%;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.5);
    
}
#item_price > p > em{
    font-style: normal;
}
#item_price > p {
    padding: 5px 0 5px  5px;
}
/* 原价 */
#item_price > #ord > em{
    color: black;
    margin-left: 50px;
}
#item_price > #ord > em > span{
    text-decoration-line: line-through;
}
/* 促销价 */
#item_price > #now > em{
    color: red;
    font-size: 25px;
    font-weight: 600;
    margin-left: 34px;
}
#now > span{
	font-size: 12px;
	color: rgb(229,34,34);
}
/* 运费 */
#carriage{
    color: rgba(0, 0, 0, 0.5);
    font-size: 15px;
    padding: 15px 5px;
    border-bottom: 1px solid gainsboro;
}
#carriage > span{
    color: black;
    margin-left: 50px;
    font-size: 14px;
}
/* 月销和评价 */
#pin{
    display: flex;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid gainsboro;
    margin-bottom: 20px;
}
#pin > li{
    display: flex;
    justify-content: center;
    align-content: center;
    width: 30%;
    margin: 15px 5px;
    border-right: 1px solid gainsboro;
}
/* 月销 */
#pin > li:first-child > span{
    color: red;
    font-weight: 550;
}
/* 评价 */
#pin > li:last-child > a{
    color: red;
    font-weight: 550;
}
/* 型号 */
#model{
    width: 800px;
    display: flex;
    font-size: 15px;
    
}
/* 型号标题 */
#model_title{
    width: 60px;
    padding: 5px 20px 5px 5px;
    
}
/* 具体型号 */
#model_content{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
#model_content > a{
    display: flex;
    font-size: 15px;
    padding: 5px;
    color: black;
    border: 1px solid gainsboro;
    margin-right: 10px;
}
#model_content > a:hover{
    color: red;
    border: 1px solid red;
}
/* 控制数量 */
#item_num{
	width: 270px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    padding: 10px 5px;
}
#item_num > #num{
    width: 35px;
    height: 25px;
    margin: 0 5px 0 50px;
   	text-align: center;
}
#item_num > #num:focus{
	outline: none;
}
/* 设置按钮 */
#item_num > div{
    width: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-right: 5px;
}
#item_num > div > button{
    width: 35px;
    height: 15px;
    position: relative;
    outline: none;
}
#item_num > div > button:first-child:before{
	content: '+';
	width: 15px;
	height: 15px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
#item_num > div > button:last-child:before{
	content: '-';
	width: 15px;
	height: 15px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}
/* 支付方式 */
#item_pay{
    width: 400px;
    height: 40px;
    display: flex;
    margin-left: 70px;
}
#item_pay > button{
    width: 50%;
    height: 100%;
    margin-right: 10px;
    border: 1px solid red;
    cursor: pointer;
}
#item_pay > button:focus{
	outline: none;
}
/* 设置立即购买 */
#item_pay > button:first-child{
    color: red;
    background: white;
}
/* 设置加入购物车 */
#item_pay > button:last-child{
    color: white;
    background: red;
}
/* 选项卡 */
#product_table{
    width: 100%;
    display: flex;
    border-left: 1px solid rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(0, 0, 0, 0.5);
}
/* 加active属性 */
#product_table > a.active{
    color: red;
    font-weight: 600;
    border-top: 2px solid red;
    border-right: 1px solid rgba(0, 0, 0, 0.5);
}
#product_table > a.active:after{
    display: none;
}
/* 选项卡：商品详情 */
#product_table > a{
    color: black;
    padding: 15px 20px;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
#product_table > a > i{
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 0;
    display: none;
    transform: translateX(-50%);
    border: 4px solid white;
    border-top-color:red;
}
#product_table > a:last-child > span{
    color: teal;
}
/* 通过伪类设置右边框 */
#product_table > a:after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 18px;
    width: 1px;
    border: 1px dashed white;
    border-right-color: rgba(0, 0, 0, 0.5);
}
/* 用于完善布局 */
#product_table > span{
    padding: 15px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
/* 设置下箭头 */
#product_table > a.active > i{
    display: block;
}
#pic_or_commont{
    font-size: 14px;
}
/* 当是详情图 */
#pic_or_commont[class='pic'] > img{
    width: 100%;
    height: 100px;
}   
/* 当是评论 */
#pic_or_commont[class='comt']{
    width: 100%;
}
/* 设置每个评论的属性 */
#pic_or_commont[class='comt'] > div{
    display: flex;
    padding: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
/* 单个评论内容 */
#pic_or_commont[class='comt'] > div > .product_commont{
    width: 800px;
    
}
/* 评论时间 */
#pic_or_commont[class='comt'] > div > .product_commont > p:first-child{
    margin-bottom: 50px;
}
#pic_or_commont[class='comt'] > div > .product_commont > p:last-child{
    color: rgba(0, 0, 0, 0.5);
}
/* 用户名 */
#pic_or_commont[class='comt'] > div > .product_username{
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}